import React, {FC} from "react";
import {Form, Input, Modal, Select} from "_antd@4.20.5@antd";

const PopUpBox: FC<any> = ({formItem, handleOk, show}) => {
    // 弹出框是否可见
    const [isModalVisible, setIsModalVisible] = show;
    // 表单标识
    const [form] = Form.useForm();

    // 处理表单验证
    const rules = (label: String, required: Boolean, regular: RegExp) => {
        let arr: { required?: boolean; message: string; pattern?: any; }[] = [];
        if (required) {
            arr.push({
                required: true,
                message: `${label}不能为空`
            })
        }
        if (regular) {
            arr.push({
                pattern: regular,
                message: `${label}格式不正确`
            })
        }
        return arr;
    }

    return (
        <Modal title="修改用户信息" okText="提交" cancelText="取消" visible={isModalVisible}
               onOk={() => {
                   handleOk(form, setIsModalVisible)
               }}
               onCancel={() => {
                   setIsModalVisible(false)
               }}>
            <Form
                name="basic"
                form={form}
                layout='vertical'
            >
                {
                    formItem.map((item: any, index: any) => {
                        return (
                            <div key={index}>
                                {
                                    item.type === "select" && (
                                        <Form.Item
                                            label={item.label}
                                            name={item.name}
                                            rules={rules(item.label, item.required, item.regular)}
                                        >
                                            <Select placeholder={`请选择${item.label}`} style={{width: "100%"}}
                                                    onChange={(value) => {
                                                        item.onChange && item.onChange(value, form)
                                                    }}>
                                                {
                                                    item.options.map((option: any, index: any) => {
                                                        return (
                                                            <Select.Option value={option.value}
                                                                           key={index}>{option.label}</Select.Option>
                                                        )
                                                    })
                                                }
                                            </Select>
                                        </Form.Item>
                                    )
                                }
                                {
                                    item.type === "input" && (
                                        <Form.Item
                                            label={item.label}
                                            name={item.name}
                                            rules={rules(item.label, item.required, item.regular)}
                                        >
                                            <Input placeholder={`请输入${item.label}`} onChange={(event) => {
                                                item.onChange && item.onChange(event, form)
                                            }}/>
                                        </Form.Item>
                                    )
                                }
                            </div>
                        )
                    })
                }
            </Form>
        </Modal>
    )
}

export default PopUpBox;